<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="A标签" name="A" lazy><tabs-cmp-a /></el-tab-pane>
    <el-tab-pane label="B标签" name="B" lazy><tabs-cmp-b /></el-tab-pane>
    <el-tab-pane label="C标签" name="C" lazy><tabs-cmp-c /></el-tab-pane>
  </el-tabs>

</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

import TabsCmpA from './components/TabsCmpA.vue'
import TabsCmpB from './components/TabsCmpB.vue'
import TabsCmpC from './components/TabsCmpC.vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute();
const activeName = ref(<string>route.query.tab ?? 'A');

const router = useRouter();
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  router.replace({ path: `/TabsView`, query: { tab: tab.paneName } })
}
</script>

<style scoped></style>
